<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户回收站</span>
        <span class="headerSize">共 {{ tableConfig.total }} 条</span>
      </div>
    </template>
    <el-input
      :prefix-icon="Search"
      v-model="formInline.keywords"
      placeholder="学生/家长/业务员/手机号/卡号"
      style="width: 320px"
    >
      <template #append>
        <span class="search" @click="handleSearch">搜索</span>
      </template>
    </el-input>
    <el-form :inline="true" :model="formInline" class="margintop">
      <el-form-item label="" class="mt10">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :picker-options="pickerOptions"
          align="right"
          @change="handleDateChange"
        />
      </el-form-item>
      <el-form-item class="mt10" style="width: 110px">
        <el-select
          v-model="formInline.year"
          placeholder="高考年份"
          clearable
          @change="handleSearch"
        >
          <el-option
            v-for="year in years"
            :key="year.value"
            :label="year.label"
            :value="year.value"
            :disabled="year.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="mt10" style="width: 110px">
        <el-select
          v-model="formInline.subjects"
          placeholder="科目"
          clearable
          @change="handleSearch"
        >
          <el-option
            v-for="subject in subjects"
            :key="subject.value"
            :label="subject.label"
            :value="subject.value"
            :disabled="subject.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="mt10" style="width: 110px">
        <el-select
          v-model="formInline.province"
          placeholder="省份"
          clearable
          @change="handleSearch"
        >
          <el-option
            v-for="province in province"
            :key="province.id"
            :label="province.provinceName"
            :value="province.id"
            :disabled="province.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="mt10" style="width: 110px">
        <el-select
          v-model="formInline.devices"
          placeholder="设备"
          clearable
          @change="handleSearch"
        >
          <!-- 遍历 devices 数据生成选项，第一条数据禁用 -->
          <el-option
            v-for="device in devices"
            :key="device.value"
            :label="device.label"
            :value="device.value"
            :disabled="device.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="mt10" style="width: 110px">
        <el-select
          v-model="formInline.userTypes"
          placeholder="用户类型"
          clearable
          @change="handleSearch"
        >
          <!-- 遍历 userTypes 数据生成选项，第一条数据禁用 -->
          <el-option
            v-for="userType in userTypes"
            :key="userType.value"
            :label="userType.label"
            :value="userType.value"
            :disabled="userType.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="mt10" style="width: 110px">
        <el-select
          v-model="formInline.cancelTime"
          placeholder="注销时间"
          clearable
          @change="handleSearch"
        >
          <!-- 遍历 cancelTimes 数据生成选项，第一条数据禁用 -->
          <el-option
            v-for="cancelTime in cancelTimes"
            :key="cancelTime.value"
            :label="cancelTime.label"
            :value="cancelTime.value"
            :disabled="cancelTime.disabled"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="" class="mt10">
        <el-input
          style="width: 150px"
          v-model="formInline.minScore"
          @input="validateScore('minScore')"
          @blur="handleScoreBlur('minScore')"
        />
        <el-icon>
          <Minus />
        </el-icon>
        <el-input
          style="width: 150px"
          v-model="formInline.maxScore"
          @input="validateScore('maxScore')"
          @blur="handleScoreBlur('maxScore')"
        />
      </el-form-item>
      <el-form-item class="mt10">
        <el-button type="primary" @click="handleSearch">筛选</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="500px"
      class="margintop"
      stripe
      v-loading="loading"
    >
      <el-table-column prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="name" label="学生姓名" width="120" />
      <el-table-column prop="graduate_time" label="高考年份" />
      <el-table-column prop="subjects" label="科目" />
      <el-table-column prop="province" label="省份" />
      <el-table-column prop="score" label="成绩" />
      <el-table-column prop="teacher" label="老师" />
      <el-table-column prop="zyCount" label="报告(数量)" />
      <el-table-column prop="device" label="设备" />
      <el-table-column prop="userTypes" label="用户类型" />
      <el-table-column prop="create_time" label="注册时间" width="220" />
    </el-table>
    <el-pagination
      :current-page="tableConfig.page"
      :page-size="tableConfig.pageSize"
      v-if="tableConfig.total"
      :page-sizes="[30, 40, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableConfig.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { userRecycleList } from '@/api/manage/recycle.js';
import { getProvinceList } from '@/api/appv2/appv2.js';
// 引入 data.js 中的数组
import { years, subjects, devices, userTypes, cancelTimes } from './data.js';
// 省份下拉数据
const province = ref([]);
// loading加载
const loading = ref(false);
// 定义选中的日期范围
const dateRange = ref([]);
const formInline = reactive({
  // 卡号/学生/家长/业务员/手机号
  keywords: '',
  // 高考年份
  year: '',
  // 科目
  subjects: '',
  // 省份
  province: '',
  // 设备
  devices: '',
  // 用户类型
  userTypes: '',
  // 注销时间
  cancelTime: '',
  // 开始日期
  startTime: '',
  // 结束日期
  endTime: '',
  // 最小分数
  minScore: '',
  // 最大分数
  maxScore: '',
});
// 表格数据
const tableData = ref([]);
// 表格配置
const tableConfig = reactive({
  page: 1,
  pageSize: 30,
  total: 0,
});
// 监听日期变化，拆分为 startTime 和 endTime
const handleDateChange = (value) => {
  if (value && value.length === 2) {
    formInline.startTime = new Date(value[0]).toISOString(); // 将开始日期转换为ISO格式
    formInline.endTime = new Date(value[1]).toISOString(); // 将结束日期转换为ISO格式
  } else {
    formInline.startTime = null;
    formInline.endTime = null;
  }
  getTableData();
};
// 禁用结束时间小于开始时间的日期
const pickerOptions = {
  disabledDate(time) {
    // 如果选择了开始时间，禁用所有比开始时间早的结束时间
    if (dateRange.value && dateRange.value.length === 1) {
      const startDate = dateRange.value[0];
      return time.getTime() < startDate.getTime();
    }
    return false;
  },
};
// 通用的验证输入分数的方法
const validateScore = (field) => {
  const value = formInline[field];
  const regex = /^[1-9]\d{2,}$/; // 匹配100及以上的正整数
  if (!regex.test(value)) {
    formInline[field] = value.replace(/[^0-9]/g, ''); // 只允许数字
  }
};
// 当失去焦点时，检查是否小于100或为空，并且重置为100
const handleScoreBlur = (field) => {
  const value = formInline[field];
  if (!value) return (formInline[field] = '');
  if (value < 100) return (formInline[field] = 100);
};
// 省份下拉数据
const getProvince = () => {
  getProvinceList().then((res) => {
    res.data.forEach(() => {
      province.value.unshift({
        provinceName: '省份',
        id: '省份',
        disabled: true,
      });
    });
    province.value = res.data;
  });
};
// 切换大小
const handleSizeChange = (val) => {
  tableConfig.pageSize = val;
  getTableData();
};
// 切换页码
const handleCurrentChange = (val) => {
  tableConfig.page = val;
  getTableData();
};
// 搜索
const handleSearch = () => {
  tableConfig.page = 1;
  getTableData();
};
// 表格数据
const getTableData = async () => {
  try {
    loading.value = true;
    const { data } = await userRecycleList({
      ...formInline,
      ...tableConfig,
    });
    tableData.value = data.data;
    tableConfig.total = data.total;
  } catch (error) {
    console.log('error:', error);
  }
  loading.value = false;
};
onMounted(() => {
  // 获取省份下啦
  getProvince();
  // 表格数据
  getTableData();
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/global.scss';
:deep(.el-button--primary) {
  background-color: var(--primary-color) !important;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

:deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

:deep(.el-input-group__append) {
  border: 1px solid #165dff !important;
  background: #165dff !important;
  color: #fff;
  cursor: pointer;
  padding: 0 !important;
  box-shadow: none !important;

  &:hover {
    background: #4080ff !important;
  }
}
</style>
